<script setup>

import useUserStore from '@/store/modules/user'
import {listAll} from "@/api/user.js";

const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  },
  /**当前双向数据绑定的值 */
  modelValue: {
    type: [String, Number],
    default: ''
  }
});

const emit = defineEmits(['update:value']);

const userStore = useUserStore()
const userList = ref(userStore.getUserList());

if (!userList.value.length) {
  listAll().then((response)=>{
    userStore.setUserList(response)
    userList.value = userStore.getUserList();
  })
}

const valueList = ref([]);

watch(valueList, (val)=> {
  const newValue = val.join(',');
  emit('update:modelValue', newValue);
});

</script>

<template>
  <div class="user-select">
    <el-select :disabled="disabled" v-model="valueList" multiple style="width: 100%;">
      <el-option v-for="u in userList" :key="u.userId" :label="u.nickName" :value="u.userId"></el-option>
    </el-select>
  </div>

</template>

<style scoped lang="scss">
  .user-select {
    width: 100%;
  }
</style>